<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定海神针</title>
    <style>
*{margin: 0;padding: 0;}
ul,ol,li{list-style:none;}    
    .box{width:600px;height:400px;border:10px solid #333;margin: 30px auto;display:flex;flex-direction:column;}
    .box>ul{width:100%; height:40px;display:flex;}  
    .box>ul>li{flex:1;display:flex;justify-content:center;align-items:center;font-size:30px;color: #fff;background-color: hotpink;}
    .box > ul > li.active {background-color: orange;}
    .box > ol {flex: 1;position: relative;}
    .box > ol > li {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: skyblue;color: #fff;font-size: 100px;display: flex;justify-content: center;align-items: center;display: none;}
    .box > ol > li.active {display: flex;}  
    </style>
</head>
<body>
<div class="box box1">
    <ul>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>

<div class="box box2">
    <ul>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>
<script>


;(function(){
let ulLiObjs=document.querySelectorAll('.box1 ul li')
ulLiObjs.forEach((item,i)=>{
    item.onmouseover=function(){
        document.querySelector('.box1 ul li.active').className=''
        this.className='active'
        document.querySelector('.box1 ol li.active').className=''
        let olLiobjs=document.querySelectorAll('.box1 ol li')
        olLiobjs[i].className='active'

    }
})

})()

;(function(){
    let ulLiObjs=document.querySelectorAll('.box2 ul li')
    ulLiObjs.forEach((item,i) =>{
        item.onmouseover=function(){
            document.querySelector('.box2 ul li.active').className=''
            this.className='active'
            document.querySelector('.box2 ol li.active').className=''
            let olLiObjs=document.querySelectorAll('.box2 ol li')
            olLiObjs[i].className='active'
        }
    })
})()








</script>
</body>
</html>